<template>
  <MenuLayout>
    <template #content>
        <el-tabs v-model="activeIndex" @tab-click="tabClick">
          <el-tab-pane label="我的服务券订单" name="1">
            <coupon-order />
          </el-tab-pane>
          <el-tab-pane v-if="userInfo?.isCompanyService !== 0" label="我的产品订单" name="2">
            <product-order />
          </el-tab-pane>
        </el-tabs>
      <div>
      </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout';
import couponOrder from "@/views/pageContent/orderManage/couponOrder.vue";
import productOrder from "@/views/pageContent/orderManage/productOrder.vue";
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      activeIndex: '1',
      formState: 0,
      isHaveServiceCompanyInfo:true
    }
  },
  components: {
    couponOrder,
    MenuLayout,
    productOrder
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
  },
  methods: {
    tabClick() {}
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/element-variables";
:deep(.el-tabs__item.is-top:nth-child(2)) {
  padding-left: 40px !important;
}
:deep(.el-tabs__item.is-active) {
  font-weight: bold;
}
:deep .el-tabs__item:hover {
  color: $--color-primary;
}
:deep(.el-tabs__active-bar) {
  background-color: $--color-primary;
}
:deep(.el-tabs__header) {
  margin: 0 0 20px;
}
:deep(.el-tabs) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
:deep(.el-tabs__content) {
  flex:1;
  overflow: auto;
}
:deep(.el-tab-pane) {
  height: 100%;
}
.button_box {
  text-align: right;
  padding: 0 30px 20px 30px;
}
</style>
